import {reactive,ref,onMounted} from "vue"
import number = CSS.number
export  function useDeviceInfo(){
  const data = reactive({
    width: 0,
    height:0
  })
  /**
   * 获取窗口大小
   */
  const getViewportSize = () => {
    data.width = document.body.clientWidth;
    data.height = document.body.clientHeight;
  }

  const DeviceType = ref<string>()
  // const device = reactive({})
   const getDeviceInfo = ():object => {
    const ua = navigator.userAgent;
    const isWindowsPhone = /(?:Windows Phone)/.test(ua);
    const isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone;
    const isAndroid = /(?:Android)/.test(ua);
    const isFireFox = /(?:Firefox)/.test(ua); // 注意：这里检测的是浏览器，而不是操作系统
    const isChrome = /(?:Chrome|CriOS)/.test(ua); // 同上
    const isIPad = /(?:iPad)/.test(ua); // 单独检测iPad，因为iPad是平板
    const isPlayBook = /(?:PlayBook)/.test(ua); // 单独检测PlayBook，因为PlayBook是平板
    const isTablet = isIPad || isPlayBook || (isAndroid && !/(?:Mobile)/.test(ua)) ||
      (isFireFox && /(?:Tablet)/.test(ua));
    const isIPhone = /(?:iPhone)/.test(ua); // 单独检测iPhone
    const isPhone = isIPhone && !isTablet; // 这里的逻辑可能需要根据实际情况调整
    const isPc = !isPhone && !isAndroid && !isSymbian && !isTablet; // 排除手机、安卓、塞班、平板

    if (isAndroid || isPhone) {
      // 手机
      DeviceType.value = "手机"
      // console.log("---------手机");
    } else if (isTablet) {
      // 平板
      DeviceType.value = "平板"
      // console.log("---------平板");
    } else if (isPc) {
      // 电脑
      DeviceType.value = "电脑"
      // console.log("---------电脑");
    }

    return {
        isTablet: isTablet,
        isPhone: isPhone,
        isAndroid: isAndroid,
        isPc: isPc
    };
  }
  // 更新窗口尺寸的函数
  const windowWidth = ref<any>(0)
  const windowHeight = ref<any>(0)
  const screenWidth = ref<any>(0)
  const screenHeight = ref<any>(0)
  const updateWindowSize = () => {
    windowWidth.value = window.innerWidth; // 更新窗口宽度
    windowHeight.value = window.innerHeight; // 更新窗口高度
    screenWidth.value = window.screen.width
    screenHeight.value = window.screen.height
    getDeviceInfo()
    if (DeviceType.value == "电脑") {
      // console.log(windowWidth.value,"电脑",windowHeight.value)
      if (1200 <= windowWidth.value <= 769) {
        // cols.value = 4
        // console.log("电脑----769---1200")
      }
    } else if (DeviceType.value == "手机") {
      // console.log("手机",screenWidth.value,screenHeight.value)
      // cols.value = 2
      // console.log("手机----")
    } else if (DeviceType.value == "平板") {

    }
  };
//添加事件
  onMounted(() => {
    // window.addEventListener('resize', updateWindowSize);
  });

  return {
    data,
    getViewportSize,
    DeviceType,
    getDeviceInfo,
  }
}